<template>
  <el-form :inline="true" :model="querys" class="demo-form-inline">
    <el-form-item label="客户名称">
      <el-input
        v-model="querys.CustomerName"
        placeholder="请输入客户名称"
        clearable
      />
    </el-form-item>
    <el-form-item label="联系人">
      <el-input v-model="querys.Phones" placeholder="请输入联系人" clearable />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="getCustomerProfileList()"
        >搜索</el-button
      >
    </el-form-item>
  </el-form>
  <el-button type="primary" size="mini" @click=""
    ><el-icon><Grid /></el-icon>&emsp;查询所有</el-button
  >
  <el-button
    style="background-color: #7acefe; border-color: #0ea3f7; color: #0ea3f7"
    size="mini"
    @click="dialogFormVisible = true"
    ><el-icon style="color: #0ea3f7; border: 1px"><Plus /></el-icon
    >&emsp;新增</el-button
  >
  <el-button
    style="background-color: #f9ea83; border-color: #e2c50c; color: #e2c50c"
    type="warning"
    size="mini"
    @click=""
    ><el-icon><Download /></el-icon>导出</el-button
  >
  <el-button type="success" size="mini" @click=""
    ><el-icon><Monitor /></el-icon>打印</el-button
  >
  <el-button type="danger" size="mini" @click=""
    ><el-icon><Remove /></el-icon>清空</el-button
  >
  <div>
    <el-table :data="CustomerProfileData" style="width: 100%">
      <el-table-column fixed prop="customerProfileId" label="序号" />
      <el-table-column prop="customerName" label="客户名称" />
      <el-table-column prop="abbreviation" label="简称" />
      <el-table-column prop="address" label="公司地址" />
      <el-table-column prop="phone" label="电话" />
      <el-table-column prop="businessContacts" label="联系人" />
      <el-table-column prop="businessTel" label="手机号" />
      <el-table-column prop="states" label="状态">
        <template v-slot="scope">
          <text v-if="scope.row.states == 0">
            <el-switch v-model="parentBorder" />
          </text>
          <text v-else>
            <el-switch v-model="childBorder" />
          </text>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button type="success" link size="mini" @click="seeWarehouse(scope.row)"
            >查看</el-button
          >
          <el-button type="primary" link size="mini" @click="updWarehouse(scope.row)"
            >修改</el-button
          >
          <el-button type="danger" link size="mini" @click="delWarehouse(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div>
      <tr>
        <td>
          <el-pagination
            v-model:current-page="querys.PageIndex"
            v-model:page-size="querys.PageSize"
            :page-sizes="[10, 20, 30, 40,50]"
            :background="true"
            layout="total, slot, prev, pager, next"
            :total="querys.totalCount"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange" >
          </el-pagination>
        </td>
        <td>
          <el-pagination
            v-model:current-page="querys.PageIndex"
            v-model:page-size="querys.PageSize"
            :page-sizes="[10, 20, 30, 40,50]"
            :background="true"
            layout="slot, sizes, jumper"
            :total="querys.totalCount"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange" >
          </el-pagination>
        </td>
      </tr>
    </div>
  </div>
  <div>
    <el-dialog v-model="dialogFormVisible" title="客户档案" width="800">
      <el-form :model="form">
        <el-form-item label="客户名称" :label-width="formLabelWidth">
          <el-input v-model="form.customerName" autocomplete="off" />
        </el-form-item>
        <el-form-item label="客户别名" :label-width="formLabelWidth">
          <el-input v-model="form.warehouseName" autocomplete="off" />
        </el-form-item>
        <el-form-item label="简称" style="margin-left: 60px">
          <el-col :span="8">
            <el-input v-model="form.abbreviation" autocomplete="off" />
          </el-col>
          <el-col :span="3" class="text-center">
            <span class="text-gray-500">所属省市</span>
          </el-col>
          <el-col :span="8">
            <el-cascader
              v-model="form.provinceCityId"
              :options="options"
              @change="handleChange"
              clearable
            />
          </el-col>
        </el-form-item>
        <el-form-item label="公司地址" style="margin-left: 60px">
          <el-input v-model="form.address" autocomplete="off" />
        </el-form-item>

        <el-form-item label="邮编" style="margin-left: 60px">
          <el-col :span="10">
            <el-input
              v-model="form.zip"
              autocomplete="off"
              style="width: 220px"
            />
          </el-col>
          <el-col :span="2" class="text-center">
            <span class="text-gray-500">电话</span>
          </el-col>
          <el-col :span="8">
            <el-input
              v-model="form.phone"
              autocomplete="off"
              style="width: 220px"
            />
          </el-col>
        </el-form-item>

        <el-form-item label="信用等级" style="margin-left: 60px">
          <el-col :span="10">
            <el-select
              v-model="form.creditRatingId"
              placeholder="请选择"
              clearable
            >
              <el-option v-for="item in creditRatingData" :key="item.creditRatingId" :label="item.creditRatingName" :value="item.creditRatingId" />
            </el-select>
          </el-col>
          <el-col :span="2" class="text-center">
            <span class="text-gray-500">信用额度</span>
          </el-col>
          <el-col :span="8">
            <el-input v-model="form.creditLimit" autocomplete="off" />
          </el-col>
        </el-form-item>

        <el-form-item label="客户分类" style="margin-left: 60px">
          <el-col :span="10">
            <el-select
              v-model="form.clientTypeId"
              placeholder="请选择"
              clearable
            >
            <el-option v-for="item in clientTypeData" :key="item.clientTypeId" :label="item.clientTypeName" :value="item.clientTypeId" />
            </el-select>
          </el-col>
          <el-col :span="2" class="text-center">
            <span class="text-gray-500">备注</span>
          </el-col>
          <el-col :span="8">
            <el-input v-model="form.remark" autocomplete="off" />
          </el-col>
        </el-form-item>
        <el-form-item label="客户分类" style="margin-left: 60px">
          <el-radio-group v-model="form.states">
            <el-radio :value="true">正常</el-radio>
            <el-radio :value="false">停用</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-tabs
          v-model="activeName"
          class="demo-tabs"
          @tab-click="handleClick"
        >
          <el-tab-pane label="开票信息" name="first">
            <el-form :model="form" label-width="auto" style="max-width: 600px">
              <el-form-item label="开户行">
                <el-input v-model="form.bank" />
              </el-form-item>
              <el-form-item label="地址电话">
                <el-input v-model="form.addressTelePhone" />
              </el-form-item>
              <el-form-item label="账号">
                <el-input v-model="form.accountNumber" />
              </el-form-item>
              <el-form-item label="税号">
                <el-input v-model="form.taxIdNumber" />
              </el-form-item>
            </el-form>
          </el-tab-pane>
          <el-tab-pane label="业务联系人" name="second">
            <el-form
              :inline="true"
              :model="form"
              label-width="auto"
              style="max-width: 600px"
            >
              <el-form-item label="联系人">
                <el-input v-model="form.businessContacts" />
              </el-form-item>
              <el-form-item label="手机号">
                <el-input v-model="form.businessTel" />
              </el-form-item>
            </el-form>
          </el-tab-pane>
          <el-tab-pane label="财务联系人" name="third">
            <el-form
              :inline="true"
              :model="form"
              label-width="auto"
              style="max-width: 600px"
            >
              <el-form-item label="联系人">
                <el-input v-model="form.financeContacts" />
              </el-form-item>
              <el-form-item label="手机号">
                <el-input v-model="form.financeTel" />
              </el-form-item>
            </el-form>
          </el-tab-pane>
        </el-tabs>
        <el-form-item label="备注" style="margin-left: 60px">
          <el-button @click="dialogFormVisible = false">取消</el-button>
          <el-button type="primary" @click="addCustomerProfiles">
            确定
          </el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref, onMounted } from 'vue';
import axios from 'axios';
import { ElMessage } from 'element-plus';
const dialogTableVisible = ref(false);
const dialogFormVisible = ref(false);
const formLabelWidth = '140px';
const parentBorder = ref(false);
const childBorder = ref(true);
const activeName = ref('first');
const apiurls = import.meta.env.VITE_APP_API_URL_BasicInformationCommon;//5176
const bpiurls = import.meta.env.VITE_APP_API_URL_BasicInformationWrite;//5013
const cpiurls = import.meta.env.VITE_APP_API_URL_RBACCommon;//5214
const dpiurls = import.meta.env.VITE_APP_API_URL_RBACWrite;//5268
const epiurls = import.meta.env.VITE_APP_API_URL_SalesManagementCommon;//5227
const fpiurls = import.meta.env.VITE_APP_API_URL_SalesManagementWrite;//5020
import type { TabsPaneContext } from 'element-plus';
const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event);
};
onMounted(() => {
  getCustomerProfileList();
  getProvinceCityQuery()
  getcreditRatingQuery()
  getclientTypeQuery()
});
const querys = reactive({
  CustomerName: '',
  Phones: '',
  PageIndex: 1,
  PageSize: 10,
  totalCount: 0,
  totalPage: 0
});
//分页
const handleSizeChange = (val: number) => {
  querys.PageSize=val
  getCustomerProfileList()
}
const handleCurrentChange = (val: number) => {
  querys.PageIndex=val
  getCustomerProfileList()
}
const CustomerProfileData: any = ref([]);
const getCustomerProfileList = () => {
  axios
    .get(apiurls+'/api/CustomerProfileReades/CustomerProfileQuery',{
        params: {
          CustomerName:querys.CustomerName,
          Phones: querys.Phones,
          PageIndex: querys.PageIndex,
          PageSize: querys.PageSize
        }
      }
    )
    .then((res) => {
      console.log(res.data);
      CustomerProfileData.value = res.data.data.list;
      querys.totalCount = res.data.data.totalCount;
      querys.totalPage = res.data.data.totalPage;
    })
    .catch((err) => {
      console.log(err);
    });
};
//修改
const seeWarehouse = (warehouseId: any) => {};
//修改
const updWarehouse = (warehouseId: any) => {};
//删除
const delWarehouse = (warehouseId: any) => {};
let   provinceCityIds:any=[]
//绑定省/市信息
const options: any = ref([]);
const handleChange = (val: any) => {
  console.log(val);
  provinceCityIds=val.toString();
  console.log(provinceCityIds);
  // var n = ""
  // n= provinceCityIds[0]+","+provinceCityIds[1]
  // console.log(n);
};
const getProvinceCityQuery = () => {
  axios
    .get(apiurls+'/api/CustomerProfileReades/ProvinceCityQuery',
      {}
    )
    .then((res) => {
      console.log(res.data.data);
      options.value = res.data.data;
    })
    .catch((err) => {
      console.log(err);
    });
};
//新增
const form = reactive({
  customerName: '',
  warehouseName: '',
  abbreviation: '',
  provinceCityId:'',
  address: '',
  zip: '',
  phone: '',
  creditRatingId: '',
  creditLimit: 0,
  clientTypeId: '',
  remark: '',
  states: true,
  bank: '',
  addressTelePhone: '',
  accountNumber: '',
  taxIdNumber: '',
  businessContacts: '',
  businessTel: '',
  financeContacts: '',
  financeTel: ''
});
const addCustomerProfiles = () => {
  console.log(form);
  var datas = {
    customerName: form.customerName,
    warehouseName: form.warehouseName,
    abbreviation: form.abbreviation,
    provinceCityId: provinceCityIds,
    address: form.address,
    zip: form.zip,
    phone: form.phone,
    creditRatingId: form.creditRatingId,
    creditLimit: form.creditLimit,
    clientTypeId: form.clientTypeId,
    remark: form.remark,
    states: form.states,
    bank: form.bank,
    addressTelePhone: form.addressTelePhone,
    accountNumber: form.accountNumber,
    taxIdNumber: form.taxIdNumber,
    businessContacts: form.businessContacts,
    businessTel: form.businessTel,
    financeContacts: form.financeContacts,
    financeTel: form.financeTel
  };
  console.log(datas);
  axios
    .post(bpiurls+
      '/api/CustomerProfiles/CustomerProfileCreate',
      datas
    )
    .then((res) => {
      console.log(res.data);
      if (res.data.code == 0) {
        ElMessage.success('成功');
        dialogFormVisible.value = false;
        getCustomerProfileList();
      } else {
        ElMessage.success('失败');
      }
    })
    .catch((err) => {
      console.log(err);
    });
};


//信用等级
const creditRatingData:any = ref([])
const getcreditRatingQuery = () => {
  axios
    .get(
      apiurls+'/api/CustomerProfileReades/CreditRatingQuery',
      {}
    )
    .then((res) => {
      console.log(res.data);
      creditRatingData.value = res.data.data;
    })
    .catch((err) => {
      console.log(err);
    });
};
//客户分类
const clientTypeData:any = ref([])
const getclientTypeQuery = () => {
  axios
    .get(
      apiurls+'/api/CustomerProfileReades/ClientTypeQuery',
      {}
    )
    .then((res) => {
      console.log(res.data);
      clientTypeData.value = res.data.data;
    })
    .catch((err) => {
      console.log(err);
    });
};
</script>

<style scoped></style>
